<style>
  .title {
    width: 100%;
  }

  .title p {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-top: 60px;
    font-weight: bold;
  }
</style>

<div>
  <div class="title">
    <p>基础改变……</p>
  </div>
  <div class="content-basic">
    <li style="font-weight: bold">》》》》》》》模板语法《《《《《《《</li>

    <p>=========循环</p>
    @if (a > b) {
      {{a}} 大于 {{b}}
    } @else {
      {{a}} 小于 {{b}}
    }

    @if (a === 2) {
      <p>a 等于 {{a}}</p>
    }@else if (a === 1) {
      <p>a == {{a}}</p>
    }@else {
      <p>未知的值</p>
    }

    <!-- 结合管道 -->
    <p>------结合异步管道</p>
    @if (username | async; as name) {
      <div>
        {{name}}
      </div>
    }

    <p>=========for循环</p>
    <!-- @for (user of users; track $index) { -->
    <p>------track</p>
    @for (user of users; track user.id) {
      <div>
        <ul>
          <li>{{$index}}--{{$count}}---{{user.id}}---{{user.name}}</li>
        </ul>
      </div>
    }
    <p>----------$index等其它上下变量</p>
    @for (item of users; track item.id; let idx = $index, e = $even) {
      Item #{{ idx }}: {{ item.name }}: <span style="color: red;">{{e}}</span>
    }
    <p>-----------empty block</p>
    @for (item of users; track item.name) {
      <li> {{ item.name }} </li>
    } @empty {<!-- 数组为空的时候显示 -->
      <li> 这是个空数组 </li>
    }

    <p>》》》》》》》》switch循环</p>
    @switch (userType) {
      @case (1) {
        <p>普通会员</p>
      }
      @case (2) {
        <p>管理员</p>
      }
      @default {
        <p>未知会员类型</p>
      }
    }
  </div>

  <p>=================================================</p>
  <div class="container">
    <p>》》》》》》》》》》》》》ng-container</p>
  </div>
  <div class="container">
    <p>》》》》》》》》》》》》》》ng-template</p>
  </div>
  <div class="container">
    <p>》》》》》》》》》》》》》ng-content</p>
    <!--<app-about>
      <card-title>
        <p>卡片标题</p>
      </card-title>
      <card-body>
        <img src="favicon.ico" alt="">
      </card-body>
    </app-about>-->

    <!-- Rendered DOM -->
    <app-about>
      <p>sfsdaf</p>
      <div ngProjectAs="username">
        狗日的
      </div>

      <p>几个意思呀</p>

      <div ngProjectAs="about-header">
        <p>我是插入的头部内容---username={{username | async}}</p>
      </div>
      <!--使用标签方式，要配置 schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]-->
      <about-header>我也是头部</about-header>

      <p ngProjectAs="about-body">我是body内容插入</p>
      <about-body>body插入内容2---userType={{userType}}</about-body>
      <p about-footer>爱的色放</p>

      <!--按class类名方式-->
      <div class="demo2">
        我是外部嵌入的内容，我所在div的class为"demo2"
      </div>
      <!--按类名方式-->
      <div name="demo3">
        我是外部嵌入的内容demo，我所在div的属性name为"demo3"
      </div>

      <p>结束-插入到了默认的 ng-content</p>
    </app-about>

    <p>------------------有条件内容投影</p>
    <app-about></app-about>
  </div>
  <div class="container">
    <p>》》》》》》》》》》》》》ng-component</p>
  </div>

  <p>》》》》》》》》》》》》动态组件-编程方式渲染组件</p>
  <div class="container">
    <p>----------方式一：使用 NgComponentOutlet</p>
    <ng-container *ngComponentOutlet="getComponent()"></ng-container>

    <p>------------方式二：使用 ViewContainerRef。不介绍了</p>

  </div>


  <p style="font-weight: bold">》》》》》》》》》》》》Component host elements</p>
  <div class="container">
    <a target="_blank" href="https://angular.dev/guide/components/host-elements">网址</a>
    <app-custom-toggle role="111fff"></app-custom-toggle>
  </div>

  <p>》》》》》》》》》》类继承</p>
  <div class="container">
    <app-list-box-base></app-list-box-base>

    <p>----------------</p>

    <app-inheritance></app-inheritance>
  </div>

  <p>》》》》》》》》》》通过查询引用子组件</p>
  <div class="container">
    <p style="color: red">组件可以定义查找子元素并从其注入器读取值的查询。

      开发人员最常使用查询来检索对子组件、指令、DOM 元素等的引用。

      查询有两类：视图查询和内容查询。</p>

    <app-custom-card>custom card</app-custom-card>

    <p>---------------contentChild</p>
    <app-custom-toggle>custom toggle</app-custom-toggle>

    <p>----------Query locators</p>
    <button #btn_query>查询视图引用</button>
  </div>
</div>
